jQuery(function () {
    var $ = jQuery;
    if (!window.webuploader) {
        console.log("请配置好window.webuploader");
        $('#dndArea p').html('请配置好window.webuploader');
        return false;
    }
    if (!window.webuploader.config || !window.webuploader.config.wrapId) {
        console.log("请配置好window.webuploader.config.wrapId");
        $('#dndArea p').html('请配置好window.webuploader.config.wrapId');
        return false;
    }
    if (!window.webuploader.uploadUrl) {
        console.log("请配置好window.webuploader.uploadUrl");
        $('#dndArea p').html('请配置好window.webuploader.uploadUrl');
        return false;
    }
    if (!window.webuploader.updateUrl) {
        console.log("请配置好window.webuploader.updateUrl");
        $('#dndArea p').html('请配置好window.webuploader.updateUrl');
        return false;
    }
    if (!window.webuploader.removeUrl) {
        console.log("请配置好window.webuploader.removeUrl");
        $('#dndArea p').html('请配置好window.webuploader.removeUrl');
        return false;
    }
    console.log("webuploader....");
    var disX = 0;
    var disY = 0;
    var minZindex = 1;
    var origin;
    var is_moveing = false;
    var $wrap = $('#' + window.webuploader.config.wrapId);
    var $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList'));
    var $statusBar = $wrap.find('.statusBar');
    var $info = $statusBar.find('.info');
    var $upload = $wrap.find('.uploadBtn');
    var $placeHolder = $wrap.find('.placeholder');
    var $progress = $statusBar.find('.progress').hide();
    var fileCount = 0;
    var fileSize = 0;
    var state = 'pedding';
    var responseUploadCount = 0;
    /*var responseUploadState = true;*/
    var percentages = {};
    var supportTransition = (function () {
        var s = document.createElement('p').style,
            r = 'transition' in s ||
                'WebkitTransition' in s ||
                'MozTransition' in s ||
                'msTransition' in s ||
                'OTransition' in s;
        s = null;
        return r;
    })();
    // 优化retina, 在retina下这个值是2
    var ratio = window.devicePixelRatio || 1;
    // 缩略图大小
    var thumbnailWidth = window.webuploader.config.thumbWidth || 110;
    thumbnailWidth *= ratio;
    var thumbnailHeight = window.webuploader.config.thumbHeight || 110;
    thumbnailHeight *= ratio;
    var allMaxSize = 1;
    var allMaxNum = 12;
    console.log(allMaxNum);
    var uploader = WebUploader.create({
                                          auto: true,
                                          swf: "webuploader-0.1.5/Uploader.swf",
                                          server: window.webuploader.uploadUrl,
                                          fileSizeLimit: allMaxNum * allMaxSize
                                                               * 1024 * 1024,//限制上传所有文件大小
                                          fileSingleSizeLimit: allMaxSize * 1024 * 1024,//限制上传单个文件大小
                                          pick: {
                                              id: '#filePicker',
                                              label: '点击选择图片'
                                          },
                                          formData: {
                                              "noticeId": window.webuploader.getUrlParams("noticeId"),
                                              "noticeType": window.webuploader.getUrlParams("noticeType")
                                          },
                                          dnd: '.queueList',
                                          paste: document.body,
                                          accept: {
                                              title: 'Images',
                                              extensions: 'gif,jpg,jpeg,png',
                                              mimeTypes: 'images/*'
                                          },
                                          resize: false,
                                          disableGlobalDnd: true,
                                          chunked: true,
                                          fileNumLimit: allMaxNum
                                      });

    function setDragEvent() {
        $(this).on('drop', function (e) {
            var $from = $(origin).parents('li');
            var $to = $(e.target).parents('li');
            var origin_pos = $from.position();
            var target_pos = $to.position();
            var from_sort = $from.attr('data-sort');
            var to_sort = $to.attr('data-sort');

            $from.addClass('move').animate(target_pos, "fast", function () {
                $(this).removeClass('move');
            }).attr('data-sort', to_sort);

            $to.addClass('move').animate(origin_pos, 'fast', function () {
                $(this).removeClass('move');
            }).attr('data-sort', from_sort);
        }).on('dragstart', function (e) {
            if (is_moveing) {
                return false;
            }
            is_moveing = true;
            e.originalEvent.dataTransfer.effectAllowd = 'move';
            origin = this;
        }).on('dragover', function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            is_moveing = false;
            e.originalEvent.dataTransfer.dropEffect = 'move';
        });
    }

    //更新服务端附件
    function updateServerFiles() {
        var postData = {};
        $('[data-src="server"]').each(function (index, obj) {
            postData[$(obj).attr('data-key')] = $(obj).attr('data-sort');
        });
        $.ajax({
                   type: 'post',
                   url: window.webuploader.updateUrl,
                   data: postData,
                   dataType: 'json',
                   success: function (data) {
                       //setState('finish');
                       alert('更新成功');
                       $upload.removeClass('disabled');
                       setState('ready');
                       uploader.reset();
                   }
               });
    }

    //删除服务端附件
    function removeServerFile(file) {
        $.ajax({
                   type: 'post',
                   url: window.webuploader.removeUrl,
                   data: {
                       "noticeId": window.webuploader.getUrlParams("noticeId"),
                       "noticeType": window.webuploader.getUrlParams("noticeType"),
                       "pictureName": file.name
                   },
                   dataType: 'json',
                   success: function (data) {
                       if (data.result) {
                           fileCount--;
                           /*if (fileCount < 12
                            && $("#filePicker2").find(".webuploader-pick").css("display")
                            == "none") {
                            uploader.addButton({
                            id: '#filePicker2',
                            label: '继续添加'
                            });
                            }*/
                           updateStatus();
                       }
                   }
               });
    }

    //初始化服务端附件
    function initServerFile() {
        if (window.webuploader.initUrl) {
            $.ajax({
                       type: 'get',
                       url: window.webuploader.initUrl,
                       data: {
                           "noticeId": window.webuploader.getUrlParams("noticeId"),
                           "noticeType": window.webuploader.getUrlParams("noticeType")
                       },
                       dataType: 'json',
                       success: function (data) {
                           if (data.result) {
                               var picturesName = data.data.pictures.split(",");
                               var data = data.data.pictureList;
                               var len = data.length;
                               for (var i = 0; i < len; i++) {
                                   var obj = {};
                                   obj.path = data[i];
                                   obj.name = picturesName[i];
                                   obj.src = "server";
                                   obj.id = "SVR_FILE_" + i;
                                   obj.rotation = 0;
                                   fileQueue(obj);
                                   /*data[i].src = "server";
                                    data[i].id = "SVR_FILE_" + i;
                                    data[i].rotation = 0;
                                    console.log(data[i]);
                                    fileQueue(data[i]);*/
                               }
                           }
                       }
                   });
        }
    }

    //添加附件到webuploader中
    function addFile(file) {
        var index = $queue.find('li').length;
        var imgLeft = index * (thumbnailWidth + 10);
        var imgTop = 0;
        var wrapHeight = thumbnailHeight + 20;
        var wrapWidth = $queue.width() + 20 + 10;
        if (wrapWidth - imgLeft < 230) {
            imgTop = parseInt(index / 4) * (thumbnailHeight + 10);
            wrapHeight = imgTop + wrapHeight;
            imgLeft =
            (index % (parseInt(wrapWidth / (thumbnailWidth + 10)) ) ) * (thumbnailWidth + 10);
        }
        /*if( imgLeft >= wrapWidth){
         imgTop = parseInt(imgLeft/wrapWidth) * (thumbnailHeight+10);
         wrapHeight = imgTop + wrapHeight;
         imgLeft = (index % (parseInt(wrapWidth/(thumbnailWidth+10)) ) ) * (thumbnailWidth+10);
         }*/
        $queue.height(wrapHeight);
        var $li = $('<li data-key="' + file.key + '"  data-src="' + file.src + '" data-sort="'
                    + index + '" draggable="true" id="' + file.id
                    + '" style="position:absolute;margin:0;cursor:move;width:' + thumbnailWidth
                    + 'px;height:' + thumbnailHeight + 'px;left:' + imgLeft + 'px;top:' + imgTop
                    + 'px">' +
                    /* '<p class="title">' + file.name + '</p>' +*/
                    '<p class="imgWrap"></p>' +
                    '<p class="progress"><span></span></p>' + '</li>'
            ),
            $btns = $('<div class="file-panel">' +
                      '<span class="cancel">删除</span>').appendTo($li),

            $progess = $li.find('p.progress span'),
            $wrap = $li.find('p.imgWrap'),
            $info = $('<p class="error"></p>'),

            showError = function (code) {
                switch (code) {
                    case 'exceed_size':
                        text = '文本大小超出最大' + allMaxSize + 'M';
                        break;
                    case 'interrupt':
                        text = '上传暂停';
                        break;
                    default:
                        text = '上传失败';
                        break;
                }
                $info.text(text).appendTo($li);
            };

        if (file.src == "client") {
            if (file.getStatus() == 'invalid') {
                showError(file.statusText);
            } else {
                $wrap.text('预览中');
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $wrap.text('不能预览');
                        return;
                    }
                    var img = $('<img draggable="true" name="' + file.name + '" src="' + src
                                + '">');
                    img.bind('load', setDragEvent);
                    $wrap.empty().append(img);
                }, thumbnailWidth, thumbnailHeight);

                percentages[file.id] = [fileSize, 0];
                file.rotation = 0;
            }
            ;

            file.on('statuschange', function (cur, prev) {
                if (prev == 'progress') {
                    $progress.hide().width(0);
                } else if (prev == 'queued') {
                    $li.off('mouseenter mouseleave');
                    $btns.remove();
                }

                if (cur == 'error' || cur == 'invalid') {
                    showError(file.statusText);
                    percentages[file.id][1] = 1;
                } else if (cur == 'interrupt') {
                    showError('interrupt');
                } else if (cur == 'queued') {
                    percentages[file.id][1] = 0;
                } else if (cur == 'progress') {
                    $info.remove();
                    $progress.css('display', 'block');
                } else if (cur == 'complete') {
                    $li.append('<span class="success"></span>');
                    $btns = $('<div class="file-panel">' +
                              '<span class="cancel">删除</span>').appendTo($li);
                    $li.on('mouseenter', function () {
                        $btns.stop().animate({height: 30});
                    });
                    $li.on('mouseleave', function () {
                        $btns.stop().animate({height: 0})
                    });
                }

                $li.removeClass('state-' + prev).addClass('state-' + cur);
            });
        }
        else {
            var img = $('<img draggable="true" name="' + file.name + '" src="' + file.path + '">');
            img.bind('load', setDragEvent);
            $wrap.empty().append(img);
        }

        $li.on('mouseenter', function () {
            $btns.stop().animate({height: 30});
        });
        $li.on('mouseleave', function () {
            $btns.stop().animate({height: 0})
        });

        $btns.on('click', 'span', function () {
            var index = $(this).index(), deg;

            switch (index) {
                case 0:
                    //修改删除后面所有图片的位置
                    var allImgs = {};
                    var del_sort = parseInt($('#' + file.id).attr('data-sort'));
                    $queue.find('li').each(function (index, obj) {
                        if ($(obj).attr('data-sort') > del_sort) {
                            var sort = parseInt($(obj).attr('data-sort'));
                            var $prevObj = $("li[data-sort=" + (sort - 1) + "]");
                            if ($prevObj) {
                                allImgs[$(obj).attr('id')] = $prevObj.position();
                            }
                        }
                    });
                    for (var k in allImgs) {
                        var sort = parseInt($('#' + k).attr('data-sort'));
                        $('#' + k).attr('data-sort', sort - 1).css({
                                                                       left: allImgs[k].left + 'px',
                                                                       top:  allImgs[k].top + 'px'
                                                                   });
                    }
                    allImgs = null;
                    if (file.src == "client") {
                        uploader.removeFile(file);
                    } else {
                        removeServerFile(file);
                        $('#' + file.id).remove();
                    }
                    return;
                case 1:
                    file.rotation += 90;
                    break;
                case 2:
                    file.rotation -= 90;
                    break;
            }

            if (supportTransition) {
                deb = 'rotate(' + file.rotation + 'deg)';
                $wrap.css({
                              '-webkit-transform': deb,
                              '-mos-transform': deg,
                              '-o-transform': deg,
                              'transform': deg
                          });
            } else {
            }
        });
        $li.appendTo($queue);
    }

    //删除webupload中的图片
    function removeFile(file) {
        var $li = $('#' + file.id);
        delete percentages[file.id];
        updateTotalProgress();
        $li.off().find('.file-panel').off().end().remove();
    }

    //更新webuploader中图片上传的进度
    function updateTotalProgress() {
        var loaded = 0,
            total = 0,
            spans = $progress.children(),
            percent;

        $.each(percentages, function (k, v) {
            total += v[0];
            loaded += v[0] * v[1];
        });

        percent = total ? loaded / total : 0;

        spans.eq(0).text(Math.round(percent * 100) + '%');
        spans.eq(1).css('width', Math.round(percent * 100) + '%');
        updateStatus();
    }

    //更新webuploader中的状态
    function updateStatus() {
        var text = '', stats;
        if (state == 'ready') {
            /*text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '.';*/
            text = '选中' + fileCount + '张图片';
        } else if (state == 'confirm') {
            stats = uploader.getStats();
            if (stats.uploadFailNum) {
                text =
                '已成功上传' + stats.successNum + '张照片' + stats.uploadFailNum
                + '张照片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>';
            }
        } /*else if (state = "responseError") {
         text =
         '共' + fileCount + '张';
         $(".success").remove();
         }*/ else {
            stats = uploader.getStats();
            /*text =
             '共' + fileCount + '张(' + WebUploader.formatSize(fileSize) + ')，已上传' + stats.successNum
             + '张';*/
            text =
            '共' + fileCount + '张';
            if (stats.uploadFailNum) {
                text += ',失败' + stats.uploadFailNum + '张';
            }
        }
        $info.html(text);
    }

    //设置webuploader的状态
    function setState(val) {
        var file, stats;
        if (val == state) {
            return;
        }
        $upload.removeClass('state-' + state);
        $upload.addClass('state-' + val);
        state = val;

        switch (state) {
            case 'pedding':
                $placeHolder.removeClass('element-invisible');
                $queue.parent().removeClass('filled');
                $queue.hide();
                $statusBar.addClass('element-invisible');
                uploader.refresh();
                break;
            case 'ready':
                $placeHolder.addClass('element-invisible');
                $('#filePicker2').removeClass('element-invisible');
                $queue.parent().addClass('filled');
                $queue.show();
                $statusBar.removeClass('element-invisible');
                uploader.refresh();
                break;
            case 'uploading':
                $('filePicker2').addClass('element-invisible');
                $progress.show();
                $upload.text('暂停上传');
                break;
            case 'paused':
                $progress.show();
                $upload.text('继续上传');
                break;
            case 'confirm':
                $progress.hide();
                $upload.text('开始上传').addClass('disabled');
                stats = uploader.getStats();
                if (stats.successNum && !stats.uploadFailNum) {
                    /*if (responseUploadState) {*/
                    setState('finish');
                    /*} else {
                     setState('responseError');
                     }*/
                    return;
                }
                break;
            case 'finish':
                stats = uploader.getStats();
                if (stats.successNum) {
                    $upload.removeClass('disabled');
                } else {
                    state = 'done';
                    location.reload();
                }
                break;
            /*case 'responseError':
             state = "responseError";
             break;*/
        }
        updateStatus();
    }

    //文件加入到webuploader中的队列
    function fileQueue(file) {
        file.src = file.src || "client";
        fileCount++;
        console.log(fileCount);
        fileSize += file.size;

        if (fileCount == 1) {
            $placeHolder.addClass('element-invisible');
            $statusBar.show();
        }

        addFile(file);
        setState('ready');
        updateTotalProgress();
    }

    if (!WebUploader.Uploader.support()) {
        console.log('WebUploader 不支持');
        throw new Error('WebUploader does not support');
    }

    uploader.addButton({
                           id: '#filePicker2',
                           label: '继续添加'
                       });
    uploader.on("error", function (type) {
        if (type == "F_DUPLICATE") {
            alert("系统提示请不要重复选择文件！");
        } else if (type == "Q_EXCEED_SIZE_LIMIT") {
            alert("附件总大小不能超过" + allMaxSize * allMaxNum
                  + "M！");
        } else if (type == "Q_EXCEED_NUM_LIMIT") {
            alert("超过了最大的上传数量");
        } else if (type == "F_EXCEED_SIZE") {
            alert("单张图片不能超过" + allMaxSize + "M");
        }
    });

    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progess span');

        $percent.css("width", percentage * 100 + '%');
        updateTotalProgress();
    });

    uploader.on('fileQueued', fileQueue);

    uploader.on('fileDequeued', function (file) {
        fileCount--;
        fileSize -= file.size;
        if (!fileCount) {
            setState('pedding');
        }
        removeFile(file);
        updateTotalProgress();
    });

    uploader.on('uploadSuccess', function (file, response) {
        console.log(response);
        if (response.result) {
            $(".imgWrap").find("img").each(function () {
                var name = $(this).attr("name");
                if (response.data.fileName == name) {
                    $(this).attr("src", response.data.path);
                }
            });
        } else {
            $(".imgWrap").find("img").each(function () {
                var src = $(this).attr("src");
                if (/^data\:image/.test(src)) {
                    $(this).parent(".imgWrap").parent("li").remove();
                    fileCount--;
                }
            });
        }
        /*else {
         responseUploadState = false;
         }*/
        /*console.log(response);*/
        console.log("uploadSuccess");
        $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
        console.log(file.id + '上传出错');
    });

    uploader.on('uploadComplete', function (file, response) {
        console.log("uploadComplete");
        $('#' + file.id).find('p.state').fadeOut();
    });

    uploader.on('all', function (type) {
        if (type == 'uploadFinished') {
            setState('confirm');
        } else if (type == 'startUpload') {
            setState('uploading');
        } else if (type == 'stopUpload') {
            setState('paused');
        }
    });

    uploader.on('uploadBeforeSend', function (block, data) {
        /*data.sort = $('#' + data.id).attr('data-sort');
         console.log(data.sort);*/
    });

    $upload.on('click', function () {
        uploader.sort(function (obj1, obj2) {
            return $('#' + obj1.id).attr('data-sort') > $('#' + obj2.id) ? -1 : 1;
        });
        if ($(this).hasClass('disabled')) {
            return false;
        }
        if (state == 'ready') {
            if (uploader.getFiles().length < 1) {
                updateServerFiles();
            } else {
                uploader.upload();
            }
        } else if (state == 'paused') {
            uploader.upload();
        } else if (state == 'uploading') {
            uploader.stop();
        }
    });

    $info.on('click', '.retry', function () {
        uploader.retry();
    });

    $info.on('click', '.ignore', function () {
        alert('todo');
    });

    $upload.addClass('state-' + state);
    updateTotalProgress();

    initServerFile();

});

